<template>
  <div class="messageInfo">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      消息详情
    </mu-appbar>
    <div class="load-more-wrap">
      <mu-container>
        <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
          <mu-card-header :title="text.sendAlias" :sub-title="this.util.formatyyyyMMddDate(text.sendTime)">
            <mu-avatar slot="avatar" color="primary">
              <mu-icon value="mail"></mu-icon>
            </mu-avatar>
          </mu-card-header>
          <mu-card-title :title="text.subject"></mu-card-title>
          <mu-card-text>
            <div v-html="text.body"></div>
          </mu-card-text>
        </mu-card>
      </mu-container>
    </div>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'messageInfo',
    data() {
      return {
        id: this.$route.query.id,
        text: {}
      }
    },
    methods: {
      getInfo() {
        let _this = this;
        this.postRequest("/userMessage/info/" + this.id).then(res => {
          if (res.code === 200) {
            _this.text = res.data.text;
          }
        });
      }
    },
    mounted: function () {
      this.getInfo();
    },
    components: {
      headerBack
    }
  }
</script>

<style scoped lang="less">

  .messageInfo {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    z-index: 999;
    background-color: #f8f8f8;
  }

  .load-more-wrap {
    margin-top: 1rem;
    width: 100%;
    height: 90%;
    overflow: scroll;
  }
</style>
